<template>
    <layout>
        <layout>
            <mt-header title="评论详情">

                <a href="/member/grow/detai" slot="left">
                    <mt-button  icon="back"></mt-button>
                </a>

            </mt-header>

            <!--人物信息-->
            <div class="name_box">
                <div class="tx_img"><img :src="showImage(comment.headImgUrl, '')"/></div>
                <div class="tx_name">
                    <div>{{ comment.commentPersonName }}</div>
                    <div>{{ comment.createDate }}</div>
                </div>
                <div class="tx_right"></div>
            </div>

            <!--人物发布内容-->
            <div class="con_title">
                <div class="con_top">{{ comment.content }}</div>
                <div class="con_img"></div>
            </div>

            <!--热门评论列表-->
            <div class="new_list">
                <div class="new_title">全部评论{{ totalCount }}条</div>
                <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                    <!--人物信息-->
                    <ul class="ui_list page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                        <li class="item" v-for="item in list">
                            <div class="name_box">
                                <div class="tx_img"><img :src="showImage(item.reviewheadImg, '')"/></div>
                                <div class="tx_name">
                                    <div>{{ item.reviewNickName }}</div>
                                    <div>{{ item.createDate }}</div>
                                </div>
                                <div class="tx_right"></div>
                            </div>
                            <div class="new_con"><span>{{ item.content}}</span> </div>
                        </li>
                    </ul>
                    <p v-show="loading" class="page-infinite-loading">
                        <mt-spinner :size="20" type="fading-circle"></mt-spinner>
                        <span>加载中...</span>
                    </p>
                </div>
            </div>
            <div class="footer">
                <span>
                	<input id="excel" type="text" placeholder="开始你的评价" v-model="content">
                	<span class="sumint" @click="sendComment" >发送</span>
                </span>
            </div>
        </layout>
    </layout>
</template>
<style lang="scss">
    @import "index.scss";
    input{
        text-indent: 0.3rem;
        outline: none;
        width: 80%;
        border: none;
        background: #f2f2f2;
        float: left;
        margin-left: 0.24rem;
        margin-top: 0.2rem;
        height: 0.6rem;
        border-radius: 0.1rem;
        font-size: 0.16rem;
    }
    .sumint{
        height: 0.6rem;
        float: left;
        width: 12%;
        color: #FFFFFF;
        border-radius: 0.1rem;
        margin-left: 0.12rem;
        line-height: 0.6rem;
        background: #00BDCF;
        margin-top: 0.24rem;
        font-size: 0.32rem;
    }
</style>
<script type="text/babel">
    import { api, image } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                content: '',
                isShow:false,
                isNone:true,
                list: [],
                lastPage: false,
                pageNo: 0,
                nextPage: 1,
                totalCount: 0,
                sort: 0,
                type: '',
                loading: false,
                wrapperHeight: 0
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            showImage(url, params){
                return image(this.api.image, url, params);
            },
            showchange:function(){
                this.isShow = true
                this.isNone = false
            },

            handleUpload() {
                document.getElementById('excel').click()
            },
            handkeFileChange(e) {
                //upload
            },
            reload(){
                this.list = [];
                this.nextPage = 1;
                this.pageNo = 1;
                this.lastPage = false;
                this.loadMore();
            },
            loadMore(){
                if (this.lastPage){
                    return;
                }

                this.loading = true;
                this.$http.get('/api/comment/information/detail/list', {
                    params: {
                        id: this.comment.id,
                        pageNo: this.nextPage
                    }
                }).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            data = data.data;
                            this.lastPage = data.lastPage;
                            this.pageNo = data.pageNo;
                            this.nextPage = data.nextPage;
                            this.totalCount = data.totalCount;

                            let list = data.list;
                            for (let i = 0; i < list.length; i++){
                                this.list.push(list[i]);
                            }

                        }

                    }else{
                        this.lastPage = true;
                    }
                    this.loading = false;


                })
            },
            sendComment(){
                if (!this.content){
                    return;
                }

                let param = new URLSearchParams();
                param.append("type", 2);
                param.append("id", this.comment.id);
                param.append("content", this.content);

                this.$http.post('/api/comment/information/add',
                    param
                ).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            this.content = '';
                            this.reload();
                        }
                    }else{
                    }
                })
            },
            replyComment(){
                if (!this.content){
                    return;
                }

                let param = new URLSearchParams();
                param.append("type", 3);
                param.append("id", this.comment.id);
                param.append("content", this.content);

                this.$http.post('/api/comment/information/add',
                    param
                ).then((response) => {
                    if (response.status == 200){
                        let data = response.data;
                        if (data.code == 200) {
                            this.content = '';
                            this.reload();
                        }
                    }else{
                    }
                })
            }
        },
        created(){
        },
        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    }
</script>

